<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const isTransferOut = ref(false)
const transferRef = ref(null)
const productList = ref([
  {
    icon: 'src/static/icon/hot/money.png',
    title: t('finance_money'),
    desc: t('finance_moneyDesc')
  },
  {
    icon: 'src/static/icon/hot/date.png',
    title: t('finance_pursuit'),
    desc: t('finance_pursuitDesc')
  },
  {
    icon: 'src/static/icon/hot/turn.png',
    title: t('finance_alipay'),
    desc: t('finance_alipayDesc')
  }
])
watch(
  () => t('home'),
  () => {
    productList.value = [
      {
        icon: 'src/static/icon/hot/money.png',
        title: t('finance_money'),
        desc: t('finance_moneyDesc')
      },
      {
        icon: 'src/static/icon/hot/date.png',
        title: t('finance_pursuit'),
        desc: t('finance_pursuitDesc')
      },
      {
        icon: 'src/static/icon/hot/turn.png',
        title: t('finance_alipay'),
        desc: t('finance_alipayDesc')
      }
    ]
  }
)
const toBill = () => {
  router.push({ path: '/bill' })
}

const popupText = computed(() => {
  // return isTransferOut.value ? t('finance_canOut') : t('finance_canIn')
  return {
    title: isTransferOut.value ? t('finance_transferOut') : t('finance_transferIn'),
    tips: isTransferOut.value ? t('finance_canOut') : t('finance_canIn')
  }
})
const handleTransfer = (type) => {
  isTransferOut.value = type
  transferRef.value.open()
}
</script>
<template>
  <div class="container">
    <div class="body w-100%">
      <div class="body_top mb-20 flex items-center justify-between">
        <div class="font-source text-[#fff]">
          <div class="title text-[22px] mb-10">{{ t('finance') }}</div>
          <div class="tips opacity-70 text-[14px] opacity-70">{{ t('finance_desc') }}</div>
        </div>
        <div class="bill font-source text-[#fff] text-[14px]" @click="toBill">{{ t('finance_bill') }}</div>
      </div>
      <div class="body_content px-15 flex flex-col gap-15">
        <div class="py-20 rounded-[20px] card">
          <div class="text-[#A2B0C3] text-[14px] font-microsoft mb-15 text-center">
            {{ t('finance_totalAmount') }}(USDT)
          </div>
          <div class="price w-100% h-67 text-[#fff] text-[24px] font-source mb-22">5,003.44</div>
          <div class="px-15 flex items-center justify-between mb-22">
            <div class="flex flex-col items-center">
              <div class="font-inter text-[#FFFFFF] text-[14px] mb-6">0.48</div>
              <div class="text-[#A2B0C3] text-[12px] font-microsoft text-center">{{ t('finance_yesterday') }}(U)</div>
            </div>
            <div class="flex flex-col items-center">
              <div class="font-inter text-[#FFFFFF] text-[14px] mb-6">943.26</div>
              <div class="text-[#A2B0C3] text-[12px] font-microsoft text-center">{{ t('finance_cumulative') }}(U)</div>
            </div>
            <div class="flex flex-col items-center">
              <div class="font-inter text-[#FFFFFF] text-[14px] mb-6">12.00%</div>
              <div class="text-[#A2B0C3] text-[12px] font-microsoft text-center">{{ t('finance_annualized') }}</div>
            </div>
          </div>
          <div class="flex items-center justify-between text-[14px] px-15">
            <div class="w-50% h-40 bg-[#fff] text-[#182461] font-source flex items-center justify-center rounded-[8px]"
              @click="() => handleTransfer(false)">
              {{ t('finance_transferIn') }}
            </div>
            <div
              class="w-50% h-40 text-[#fff] font-source flex items-center justify-center rounded-[8px] installment ml-14"
              @click="() => handleTransfer(true)">
              {{ t('finance_transferOut') }}
            </div>
          </div>
        </div>
        <div class="p-20 rounded-[20px] income font-microsoft">
          <div class="text-[#fff] text-[14px] mb-15">{{ t('finance_currentProduct') }}</div>
          <div class="flex items-center justify-between mb-7">
            <div class="flex items-center">
              <div class="fund_yield text-[#CBE5FF] text-[10px] w-128 h-13">{{ t('finance_fund') }}</div>
              <div class="flex flex-col items-center ml-15">
                <div class="font-inter text-[#fff] mb-4">
                  <span class="tetx-[23px] font-600">31</span>
                  <span class="tetx-[17px] font-500">%</span>
                </div>
                <div class="text-[10px] text-[#CBE5FF] text-center">{{ t('finance_improvement') }}</div>
              </div>
            </div>
            <div
              class="p-10 text-[#182461] text-[14px] text-center h-34 flex items-center justify-center rounded-full bg-[#fff]">
              {{ t('finance_makeTransfer') }}
            </div>
          </div>
          <div class="product_yield text-[#CBE5FF] text-[10px] w-210">{{ t('finance_profitProduct') }}</div>
        </div>
        <div class="p-16 rounded-[15px] bg-[#fff]/10">
          <div class="text-[#fff] text-[18px] font-pingfang mb-22">{{ t('finance_highlights') }}</div>
          <div class="flex flex-col gap-32">
            <div class="flex items-center" v-for="(item, index) in productList" :key="index">
              <van-image radius="8" width="40" height="40" lazy-load :src="item.icon" />
              <div class="ml-19">
                <div class="text-[#fff] text-[16px] font-pingfang mb-10">{{ item.title }}</div>
                <div class="text-[#A2B0C3] text-[12px] font-microsoft">{{ item.desc }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Dialog ref="transferRef" :title="popupText.title">
      <div class="pt-[16px] pb-[20px]">
        <div class="text-[#000] text-[14px] font-source font-700 mb-8">{{ t('finance_quantity') }}</div>
        <div class="h-46 px-16 flex items-center rounded-[7px] input mb-8 font-pingfang text-[14px]">
          <input type="number" class="text-[#78859D] w-100%" :placeholder="t('finance_inputTips')" />
          <div class="text-[#0074FF] ml-6">MAX</div>
        </div>
        <div class="text-[#0074FF] text-[12px] font-pingfang">{{ popupText.tips }}：10 USDT</div>
      </div>
    </Dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  .body {
    padding: 20px 0px;
    min-height: calc(100vh - var(--van-nav-bar-height));
    background: url('@/static/imgs/lending/bg.png') no-repeat;
    background-size: 100% 100%;

    // padding: 20px 15px;
    &_top {
      padding-left: 15px;

      .bill {
        width: 72px;
        height: 32px;
        border-radius: 11px 0 0 11px;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 16px 0 rgba(0, 60, 255, 0.34), 0 0 10px 0 rgba(163, 192, 255, 0.57) inset;
        text-align: center;
        line-height: 32px;
      }
    }

    &_content {
      .card {
        border: 1px solid var(--Linear, #0074ff);
        // box-shadow: 0 4px 16px 0 rgba(0, 60, 255, 0.34), 0 0 10px 0 rgba(163, 192, 255, 0.57) inset;

        .price {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          // text-align: center;
          // line-height: 67px;
          z-index: 1;

          &::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            inset: 0;
            z-index: -1;
            position: absolute;
            opacity: 0.5;
            background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(83, 126, 255, 0.71) 49.04%,
                rgba(255, 255, 255, 0) 100%);
          }

          // background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(83, 126, 255, 0.71) 49.04%, rgba(255, 255, 255, 0.00) 100%);
        }
      }
    }
  }
}

.installment {
  // border-radius: 16.564px;
  background: var(--5,
      radial-gradient(41.55% 42.54% at 52.19% 100%, #89a6ea 0%, #688eff 55.29%, #164bd6 100%));
  box-shadow: 0 0 7.826px 0 rgba(255, 255, 255, 0.5) inset,
    0 6.261px 25.043px 0 rgba(0, 60, 255, 0.34);
}

.income {
  background: url('@/static/imgs/index/user_bg.png') no-repeat;
  background-size: 100% 100%;
}

.fund_yield {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #c3ddfe 100%);
}

.product_yield {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #1675fd 100%);
}

.input {
  background: #eceff5;

  input {
    background: rgba(65, 88, 140, 0);
    border: none;
    outline: none;
  }
}
</style>
